<template>
    <view class="box" v-for="(item,indexs) in comment_list" :key="item.id">
        <view class="user_info">
            <img
            class="info_img"
            :src="item.user_img"
                mode="scaleToFill"
            />
            <view class="info_text">
                <view class="info_name">{{item.user_name}}</view>
                <view class="info_date">{{item.create_date}}</view>
                
            </view>
        </view>
        <uni-rate
                v-model="item.star"
                isFill="false"
                readonly="true"
                margin="17px"
              />
        <view class="comment_content">{{item.comment}}</view>
        <view class="comment_img" v-if="item.is_img">
                <view class="box_img" v-for="index in item.url_list" :key="index.id">
                    <img
                    class="co_img"
                    :src="index.url" @click="Ontap(index.url,item.url_list)"
                        mode="scaleToFill"
                    />
                </view>
            
              </view>
    </view>	
</template>
<script setup lang="ts">
const Props = defineProps(['comment_list'])
console.log(Props.comment_list);
const Ontap=(url,urls)=>{
	let tem_urls=[]
	for(let i=0;i<urls.length;i++){
		tem_urls.push(urls[i].url)
	}
	uni.previewImage({
    current: url,
    urls: tem_urls,
  })
}

</script>
<style lang="scss">
.box{
	border-radius: 5px;
	margin: 3px;
	margin-top: 10px;
	background-color: #fff;
	.user_info{
		width: 100%;
		display: flex;
		margin-bottom: 3px;
		align-items: center;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
		.info_img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin: 5px;

		}
		.info_text{
			font-size: 11px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.9);

			.info_name{
				margin: 5px;
			}
			.info_date{
				margin: 5px;
				font-weight: 600;
				font-size: 9px;
				color: rgba(0, 0, 0, 0.6);
			}
		}
		
	}
	.comment_content{
		
	
	margin: 5px;
	font-size: 13px;
	/* font-weight: 600; */
	line-height: 15px;
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 6px;
	letter-spacing: 0.1em;
	}
	.comment_img{
		width: 100%;
		
		margin: 5px;
		margin-top: 0px;
		padding-bottom: 6px;
		display: flex;
		flex-wrap: wrap;
		.box_img{
			width: 220rpx;
			height: 220rpx;
			margin: 5px;
			overflow: hidden;
			border-radius: 10px;
			.co_img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
	}
}
</style>